<template>
  <div class="hello">
    {{msg}}
    <div class="card-box" style="position: relative;">
        <el-table :data="temp" stripe style="width: 100%">
            <el-table-column prop="tmp" label="传感器名称">
            </el-table-column>
            <el-table-column prop="value" label="温度">
                <template slot-scope="scope">
                        <span>{{scope.row.value}} ℃</span>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                    <span class="bgcolor" :class="{'active': scope.row.color == 0}"></span>
                </template>
            </el-table-column>
            <el-table-column prop="input" label="阈值">
                <template slot-scope="scope">
                    <el-input type="number" class="input" v-model="scope.row.input" placeholder="请输入内容">
                    </el-input>
                </template>
            </el-table-column>
        </el-table>
        <el-button style="position: absolute; right: 0px; bottom: 17px;" @click="hander">提交阈值</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your home',
      temp: [
            {
                tmp: 'CPU温度',
                value: 0,
                color: 0,
                input: 0
            },
            {
                tmp: '交换芯片温度',
                value: 0,
                color: 0,
                input: 0
            },
            {
                tmp: '板卡环境温度',
                value: 0,
                color: 0,
                input: 0
            }
        ],
    }
  },
  
  methods: {
      hander() {
          alert(1111)
            for(let i=0; i< this.temp.length; i++) {
                console.log(Number(this.temp[i].input))
                if(Number(this.temp[i].input) > 120 || Number(this.temp[i].input) < 0) {
                    console.log(2222)
                    this.$confirm('阈值需大于0，小于120', '确认', {
                        showClose: false
                    })
                    .then(_ => {})
                    .catch(_ => {});
                } 
            }
        }
  },
//   watch: {
//       temp: {
//         handler(newVal, oldValue) {
// 　　　　　　console.log(newVal)
//             for(let i=0; i< this.temp.length; i++) {
//                 if(Number(newVal[i].input) > 127 || Number(newVal[i].input) < -128) {
//                     this.$confirm('阈值需大于-128，小于127', '确认', {
//                         showClose: false
//                     })
//                     .then(_ => {})
//                     .catch(_ => {});
//                 }
//             }
// 　　　　},
// 　　　　deep: true
//       }
//   }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
